CSS - de algemene verwantschapselector
De algemene sibling selector is beschikbaar in CSS3 en de combinator gebruikt in deze selector is een tilde (~).
Beschrijving
De selector kiest elementen die broers en zussen van een bepaald element zijn. In dit voorbeeld is er een match voor p-element als het een broer/zus is van een h2-element:
h2~p {
⋮ declarations
}
De elementen hoeven geen aangrenzende broers en zussen te zijn. Het volstaat dat ze dezelfde ouder hebben. Hou rekening met de 'leeftijd' in het 'gezin'. Er wordt alleen gezocht naar broers en zussen die later komen.
<h2>Heading</h2> <p>The selector above matches this paragraph.</p> <p>The selector above matches this paragraph.</p>
Hier komen beide alinea's overeen met de h2 sibling selector ~ p. p-elementen zijn broers en zussen van het h2-element.
De onderstaande paragraaf is niet een broer of zus van de header — ze hebben niet dezelfde ouder.
<h2>Heading</h2> <div> <p>The selector above does not match this paragraph.</p> </div>
Alleen de tweede alinea hieronder wordt geselecteerd door de h2 sibling selector ~ p — alhoewel ze broers en zussen zijn — omdat het eerste p-element komt vóór het element h2 (eerder geboren is):
<p>The selector above does not match this paragraph.</p> <h2>Heading</h2> <p>The selector above matches this paragraph.</p>